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Ouestion: 1 


DRAG DROP 

You are validating user input by using JavaScript and regular expressions. 

A group of predefined regular expressions will validate two input fields: 

An email address in a function named validateEmail (for example, firstname@contoso.com) 

A nine-digit number that allows optional hyphens after the second and fifth character in a function 
named validateSSN(for example, 555555555 or 555-55-5555) 

You need to use the correct expression to validate the input. 

Which expression should you insert into each function? (To answer, drag the appropriate regular 
expression statement to the correct location. Each regular expression statement may be used once, 
more than once, or not at all. You may need to drag the split bar between panes or scroll to view 
content.) 
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"\d{1,2}(\-1\/1\.)\d{1,2}\1\d{4}$/; 


[(0-9]13}\"2{0-9){2}\"2(0-9){4}S/; 


/* [0-9] 101802 {0-9} {2}\** [0-9] (41$/: 


/*{a-zA-Z0-9. -]+@[{a-zA-Z0-9.-]+\. [a-zA-Z] (2,4)5/: 


*“[0-9{3}+@ [a-zA-Z0-9.-]+\. [0-9] {2,4}$/; 


TT CCC 


Answer Area 


function validateSSN(userinput) { 
var ssnPattern = 


| 
return ssnPattern.test (userinput) : 
} 


function validateEmail(userinput) { 
var emailPattern = 


| 


return emailPattern.test (userinput): 


Answer: 
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/"\at1,2}(\-1\/1\.)\dt1,2}\1\d{4}$/: 


| 


ne a te ee 


/* {0-9{3}+@ [a-zA-Z0-9.-]+\. [0-9] {2,4}S/; 


TT Le 
Answer Area 


function validateSSN(userinput) { 


var ssnPattern = 


LRS 9] (3)V”“?9[0-9] {2}\*2 [0-9] (4)$/; w 


= Am = | 


return ssnPattern.test (userinput) ; 
) 


function validateEmail(userinput) { 
var emailPattern = 
[7^ 1a-zA-20-$. -]+8[a-ZA-Z0-9.-]+). [a-ZA-2] {2,4)8/; 


return emailPattern.test (userinput): 


Ouestion: 2 


You are developing a customer web form that includes the following HTML. 
<input id="txtValue" type="text" /> 

A customer must enter a valid age in the text box prior to submitting the form. 
You need to add validation to the control. 

Which code segment should you use? 
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CA. function validate() 1 
var value = S("ácxtValue").text(); 
var regex = /*[\d\,\.]*$/; 
if (!regex.test(value) || name == "") 
alert ("please enter valid value"); 
return; 
} 
CB. function validate() { 
var name = $("#txtValue").val(); 
if (name == null || name == "") 
alert ("please enter valid value"); 
return: 
} 
C C. function validate() { 
var name = $("#txtValue").text(); 
if (name == null || name == "") 
alert ("please enter valid value"); 
return; 
} 
C D. function validate() { 
var value = $("#txtValue").val(); 
var regex = /*[\d\,\.]*5/; 
if (!regex.test (value) || value == “") 
alert ("please enter valid value"): 
return; 
} 
return emailPattern.test (userinput) Z 
} 
A. Option A 
B. Option B 
C. Option C 
D. Option D 
Answer: D 


val 
Return value 


A string containing the value of the element, or an array of strings if the element can have multiple 


https://www.certkillers.net 


Ouestions & Answers PDF Page 6 


values 


Ouestion: 3 


You are developing a customer contact form that will be displayed on a page of a company's website. 
The page collects information about the customer. 

If a customer enters a value before submitting the form, it must be a valid email address. 

You need to ensure that the data validation reguirement is met. 

What should you use? 


A. <input name-"email" type="url"/> 

B. <input name="email" type="text" reguired-"reguired"/> 
C. <input name="email" type="text"/> 

D. <input name="email" type-"email"/> 


Answer: D 


Example: 

<form> 

E-mail: 

<input type="email" name="email"> 

</form> 

Reference: 

http://www.w3schools.com/html/html5 form input types.as 


Ouestion: 4 


DRAG DROP 

You are developing a form that captures a user's email address by using HTML5 and jQuery. 

The form must capture the email address and return it as a guery string parameter. The guery string 
parameter must display the © symbol that is used in the email address. 

You need to implement this functionality. 

How should you develop the form? (To answer, drag the appropriate code segment to the correct 
target or targets in the answer area. Each code segment may be used once, more than once, or not at 
all. You may need to drag the split bar between panes or scroll to view content.) 
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str = $("form").serialize(); | <!DOCTYPE html> 
z - fé > 
str = decodeURIComponentístr), | <head> 


<script src>"http://code.jguery.com/jguery-latest.j3"></script> 


str = $("form").contents.toString(); i iani 


str = $("form").toLocaleString(); | “body” 
ee <fomm> 
str = decodeURI (str); | <input type="text" name="email" /> 


<input type="submit" value="Submit" /> 
| </form> 
i <script> 
S ("form") .submit (function () { 
var str; 


return true: 
1; 
</script> 
</body> 
</html> 


Answer: 


<IDOCTYPE btml> 
<html> 
<head> 
<script erc="http: //code. jquery. com/jquery-listest .js"></script> 


str = $("form").contents.toString(); | 4; 


str = ${"form"),toLocaleString(); | <body> 
= = . <form> 


str = decodeURI(str), <input type="text" namez"email" /> 


<input type="submit” value="Submit" /> 
</form> 
<script> 
$ ("form") .submit (function () { 
var str; 
str = ${"form").serialize(); 


str = decodeURIComponentístr): 
return true: mm 
DE 
</script> 
</body> 


</html> 


Explanation: 

* The serialize() method creates a URL encoded text string by serializing form values. 

You can select one or more form elements (like input and/or text area), or the form element itself. 
The serialized values can be used in the URL query string when making an AJAX request. 

Example: S("form").serialize()); 

* decodeURIComponent 

The decodeURIComponent() function decodes a URI component. 

Return Value: A String, representing the decoded URI 

Incorrect: 

Not decodeURI: 

decodeURI is intended for use on the full URI. 

decodeURIComponent is intended to be used on .. well .. URI components that is any part that lies 
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between separators (; / ? : © & < + S, #). 

Reference: jOuery serialize() Method 
http://www.w3schools.com/jguery/ajax serialize.as 
http://www.w3schools.com/jsref/jsref encodeuri.as 


Ouestion: 5 


You are developing an application that consumes a Windows Communication Foundation (WCF) 
service. 
The application interacts with the service by using the following code. (Line numbers are included for 
reference only.) 

01 <script> 


02 function getCountry (country) 

03 S.ajax(1 

04 type: "POST", 

05 contentType: "appnlication/json: charset=utf-8", 
06 url: "http://contoso.com/Service.svc/GetCountry", 
07 data: "("Country":" + country + ")", 

08 dataType: "json", 

09 success: OnSuccess, 

10 error: OnError 

11 

12 +): 

13 ) 

14 function OnSuccess (data, status) 

15 

16 } 

17 function OnError (request, status, error) 

18 Sung 

19 ) 


20 </script> 
You need to authenticate to the WCF service. 
What should you do? 


A. At line 11, add the following lines of code. 

„username: yourusername 

„password: yourpassword 

B. At line 11, add the following line of code. 

,credentials: prompt 

C. At line 06, replace the code with the following line of code. 
url: "http://contoso.com/Service.svc/GetCountry? 
Username=username&password=password", 

D. At line 11, add the following line of code. The username and password will be stored in an XML 
file. 

,credentials: credentials.xml 


Answer: C 


Question: 6 
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You are developing a web page that enables customers to upload documents to a web server. The 
page includes an HTML5 PROGRESS element named progressBar that displays information about the 
status of the upload. 

The page includes the following code. (Line numbers are included for reference only.) 


01 var xhr = new XMLHttpRequest |); 

02 var progressBar = $("#progressBar"); 

03 

04 function(e) 

05 if (e.lengthComputable) 

06 progressBar.value = (e.icaded / e.totai) * 100; 
07 progressBar.textContent = progressBar.value: 


tte 


An event handler must be attached to the reguest object to update the PROGRESS element on the 
page. 

You need to ensure that the status of the upload is displaved in the progress bar. 

Which line of code should vou insert at line 03? 


A. xhr.upload.onloadeddata = 
B. xhr.upload.onplaying = 

C. xhr.upload.onseeking = 

D. xhr.upload.onprogress = 


Answer: D 
Example: 
xhr.upload.onprogress = function(evt) 
{ 
if (evt.lengthComputable) 
{ 


var percentComplete = parselnt((evt.loaded / evt.total) * 100); 
console.log("Upload: " + percentComplete + "% complete") 


H 
Reference: 
http://stackoverflow.com/guestions/3352555/xhr-upload-progress-is-100-from-the-start 


Ouestion: 7 


You are developing a customer web form that includes the following HTML. 

<label id="txtValue"X/label> 

Information from the web form is submitted to a web service. The web service returns the following 
JSON object. 

{ 

"Confirmation": "1234", 

"FirstName": "John" 

} 


You need to display the Confirmation number from the JSON response in the txtValue label field. 
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Which JavaScript code segment should you use? 


A. S("#txtValue").val = (JSONObject.Confirmation); 
B. $("#txtValue").val (JSONObject.Confirmation); 

C. S("#txtValue").text = (JSONObject.Confirmation); 
D. S("#txtValue").text (ISONObject.Confirmation); 


Answer: D 


Incorrect: 

not A, not B: A label object has no value attribute. 
Reference: 

http://api.jquery.com/text 


Question: 8 


HOTSPOT 

You are developing a web application that retrieves data from a web service. The data being 
retrieved is a custom binary datatype named bint. The data can also be represented in XML. 

Two existing methods named parseXml() and parseBint() are defined on the page. 

The application must: 

Retrieve and parse data from the web service using binary format if possible 

Retrieve and parse the data from the web service using XML when binary format is not possible 

You need to develop the application to meet the requirements. 

What should you do? (To answer, select the appropriate options from the drop-down lists in the 
answer area.) 


var request = $.ajax({ 
ura: 97 


TEE 


lif (request. getResponseHeader ("Content-Type") == "application/bint”) 


dataFilter: function (data, type) { 


if (request.getResponseHeader ("Content-Type") == “application/bint") 


return parseBint(data); 
else 
return parseXml(data); 


bs 


success: function (data) { 
start(data), 


1); 
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var request = $.ajax({ 
uris 1723 


if a Si ash oc Lm == Bain bli 


if (me = = "application /bint") 

if tronueët. mimeType == "application/bint") 
accepts: tapplication/bint, text/xmľ, 
Prekáža ‘application/bint, text/xml’, 


Bick nonsebe 


if Wie = = 'applcation/bint") 

if uent mimeType == "application/bint") 
accepts: ‘application/bint, text/xml’, 
contentT me ‘application/bint, text/xml’, 
dataType: "application/bint, textæml', 


return parseBint(data); 
else 
return parseXml(data); 
h 
success: function (data) ( 
start(data); 
} 
}); 


Answer: 
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var request = $.ajax({ 
uri: °F"; 


if abi k až b == Fe cath hrda 


when! 


dataFilter: function (data, type) { 


piz tks sDOMSEeNE acer 


if epa : ROV) 


if (request: mimeType == "application/bint") 
accepts: ‘application/bint, text/xml’, 
contentType: "application/bint, text/xml’, 
dataType: "application/bint, text/xml', 


return parseBint(data) ; 
else 
return parseXml (data); 
h 
success: function (data) 1 
start(data); 


} 
+): 


* accepts : application/bint, text/xml! 
accepts:'application/bin,text/xml' to accept only XML and binary content in HTML responses. 
* Use the following condition to check if the html response content is 
binary: If(request.getResponseHeader("Content-Type")=="application/bint" 
* Var request = S.ajax({ 
uri:'/', 
accepts: "application/bint, text/xml, 
datafilter: function(data,type){ 
if(request.getResponseHeader("Content-Type")=="application/bint") 
return parseBint(data); 
else 
return parseXml(); 


L 
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success: function (data) ( 
start(data); 
) 
}); 


Question: 9 


You are developing a customer web form that includes the following HTML. 
<input id = "txtValue" /> 

A customer must enter a value in the text box prior to submitting the form. 
You need to add validation to the text box control. 

Which HTML should you use? 


A. <input id="txtValue" type="text" required="required"/> 

B. <input id="txtValue" type="text" pattern="[A-Za-z]{3}" /> 

C. <input id="txtValue" type="required" /> 

D. <input id="txtValue" type="required" autocomplete-"on" /> 


Answer: A 


Definition and Usage 
The required attribute is a boolean attribute. 
When present, it specifies that an input field must be filled out before submitting the form. 
Example 
An HTML form with a required input field: 
<form action="demo_form.asp"> 
Username: <input type="text" name="usrname" required> 
<input type="submit"> 
</form> 
Username: <input type="text" name-"usrname" required> 
Reference: HTML <input> required Attribute 
http://www.w3schools.com/tags/att_input_required.asp 


Question: 10 


DRAG DROP 

You are developing a web page for runners who register for a race. The page includes a slider control 
that allows users to enter their age. 

You have the following requirements: 

All runners must enter their age. 

Applications must not be accepted from runners less than 18 years of age or greater than 90 years. 
The slider control must be set to the average age (37) of all registered runners when the page is first 
displayed. 

You need to ensure that the slider control meets the requirements. 

What should you do? (To answer, drag the appropriate word or number to the correct location in the 
answer area. Each word or number may be used once, more than once, or not at all. You may need to 
drag the split bar between panes or scroll to view content.) 
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range | 
slider | 


— ) 


az | 
avgAge() | 
default | 
value | 


required | 


optional | 


slider 


100 


vgAge() | 


all 


default 


optional | 


D 


<input type=" 
mins" 


step-"5" 


/> 


<input type=" range 


min=" is 
step="5" vave. | 


required /> 


Page 14 
LL 
ma x= UL " 
LL 
Answer: 
max=" 9 I” 
—-——— 
37 LL 


Box 1-3: The <input type="range"> is used for input fields that should contain a value within a range. 


Example 


<input type="range" name="points" min="0" max="10"> 
Box 4-5: Use the value attribute to set the default value 


Box 6: Definition and Usage 
The required attribute is a boolean attribute. 
When present, it specifies that an input field must be filled out before submitting the form. 
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Example 

Username: <input type="text" name-"usrname" required> 
Reference: HTML Input Types 
http://www.w3schools.com/html/html form input types.asp 


Ouestion: 11 


You are developing an HTML5 web application that displays the current temperature whenever a 
button is clicked. The following code provides this functionality. 
function Loader () 

this.status — "ready": 

this.temp = 50; 

this.updateStatus = function (newStatus) 

status = newStatus; 

Le 


ie 


var loader = new Loader(); 


S (function () { 
S("#ioadTemp") .click (function (eventData) 
loader.temp = loadTemp():; 
loader .updateStatus ("done"); 
}); 
+)? 
When the temperature is loaded, the status property on the loader instance does not change. 
You need to ensure that the status property on the loader instance is updated when the temperature 
is loaded. 
Which code segment should you use to replace the Loader function? 
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CA function Loader() 1 
this.status = "ready": 
this.temp — 50: 
this.updateStatus = function (newStatus) { 
this.status = newStatus; 
Fe 


C B. function Loader (1 { 
this.prototvpe.status = "ready": 
this.temp = 50; 
this.updateStatus = function (newStatus) { 
this.status = newStatus; 
}; 


C €. function Loader() { 
status = "ready": 
this.temp = 50; 
this.updateStatus = function (newStatus) ( 
status = newStatus; 
}; 


CD. function Loader() { 
window.status = "ready": 
this.temp = 50; 
this.updateStatus = function (newStatus) { 
status = newStatus; 
+: 


A. Option A 
B. Option B 
C. Option C 
D. Option D 


Answer: A 


Incorrect: 

not D: window.status property 

The status property sets the text in the status bar at the bottom of the browser, or returns the 
previously set text. 
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Ouestion: 12 


You are creating a class named Consultant that must inherit from the Employee class. The Consultant 
class must modify the inherited PayEmployee method. The Employee class is defined as follows. 
function Employee() {} 

Employee.prototype.PayEmployee = function ( ){ 

alert('Hi there!'); 

} 

Future instances of Consultant must be created with the overridden method. 

You need to write the code to implement the Consultant class. 

Which code segments should you use? (Each correct answer presents part of the solution. Choose 
two.) 


A. Consultant.PayEmployee = function () 

{ 

alert('Pay Consulant'); 

} 

B. Consultant. prototype.PayEmployee = function () 
{ 

alert('Pay Consultant’); 

} 

C. function Consultant () { 

Employee.call(this); 

} 

Consultant.prototype = new Employee(); 
Consultant. prototype.constructor = Consultant; 

D. function Consultant() { 

Employee.call(this); } 
Consultant.prototype.constructor = Consultant.create; 


Answer: B, C 


* Object.prototype.constructor 

Returns a reference to the Object function that created the instance's prototype. Note that the value 
of this property is a reference to the function itself, not a string containing the function's name. The 
value is only read-only for primitive values such as 1, true and "test". 

* The constructor property is created together with the function as a single property of 
func.prototype. 

Reference: Object.prototype.constructor 


Question: 13 


You are modifying an existing web page. The page is being optimized for accessibility. The current 
page contains the following HTML. 
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<ul> 
<li><a href="">Home</a></li> 
<li><a href=""*>Sales</a></li> 
<li><a href="">Operations</a></1:i> 
</ul> 


Standards-compliant screen readers must be able to identify the links contained within the 
navigation structure automatically. 

You need to create the navigation link structure in the page. 

With which container tags should you wrap the existing markup? 


A. <navmap> </navmap> 
B. <div id="nav"> </div> 
C. <nav> </nav> 

D. <map> </map> 


Answer: C 


HTML <nav> Tag 
Example 
A set of navigation links: 
<nav> 
<a href="/html/">HTML</a> | 
<a href="/css/">CSS</a> | 
<a href="/js/">JavaScript</a> | 
<a href="/jquery/">jQuery</a> 
</nav> 
Reference: HTML <nav> Tag 
http://www.w3schools.com/tags/tag nav.as 


Question: 14 


HOTSPOT 

You are developing an airline reservation website by using HTML5 and JavaScript. A page on the site 
allows users to enter departure and destination airport information and search for tickets. 

You have the following requirements: 

Users must be able to save information in the application about their favorite destination airport. 
The airport information must be displayed in the destination text box whenever the user returns to 
the page. 

You need to develop the site to meet the requirements. 

Which lines of code should you use? (To answer, select the appropriate options from the drop-down 
lists in the answer area.) 
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<body> 
<input id="txtDest" type="text" /> 
<input type="button" value="Submit" 
onclick="storeDestination('txtDest')" /> 
<script> 
showDestination(); 
function showDestination() { 


var dest = localStorage.destination; X 


if (dest != null) 
document.getElementById("txtDest").value = dest; 


function storeDestination(id) i 
var dest = document .getElementById (id) .value: 


[var dest = localStorage.destination; | 
} 


</script> 
</body> 
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<body> 
<input id="txtDest" type="text" /> 
<input type="button" value="Submit" 
onclick="storeDestination('txtDestc')" /> 
<script> 
showDestination(); 
function showDestination() { 


var dest = localStorage.destination; 


if (dest != null) 
document „getElementBylId("txtDest") „value = dest; 


function storeDestination(id) { 
var dest = document.getElementById(id).value; 


</script> 
</body> 


Answer: 
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<body> 
<input id="txtDest" type="text" /> 
<input type="button" value="Submit" 
onclick="storeDestination('txtDest')" /> 
<script> 
showDestination(); 
function showDestination() { 


var dest = localStorage destination; | 


jar dest = localStorage.destinatior 


localStorage.destination = dest; 
var dest = sessionStorage.destination; 
.destination = dest; 


if (dest != null) 
document .getElementBylId("txtDest").value = dest; 


function storeDestination(id) { 
var dest = document .getElementByld(id) .value: 


</script> 
</body> 
Explanation: 


* retrieve localStorage.destination 
* store localStorage.destination 


Question: 15 


HOTSPOT 

You are developing an HTML5 web application for displaying encyclopedia entries. 

Each encyclopedia entry has an associated image that is referred to in the entry. 

You need to display the image by using the correct semantic markup. 

What should you do? (To answer, select the appropriate options from the drop-down list in the 
answer area.) 
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{> 


<img src="details.png” /> 


{> 


Image description 
AL PP 
£4 im 
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Answer: 
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Explanation: 


The “figures element 
The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up 


diagrams, illustrations, photos, and code examples (among other things). 
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Example: 
<figure> 
<img src="/macaque.jpg" alt-"Macague in the trees"> 
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a 
href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption> 
</figure> 
Reference: The figure & figcaption elements 


Question: 16 


You are creating a JavaScript object that represents a customer. 

You need to extend the Customer object by adding the GetCommission() method. 

You need to ensure that all future instances of the Customer object implement the GetCommission() 
method. 

Which code segment should you use? 


CA. Customer.apply.GetCommission() = function() 


alert ('payroli'); 


C B. Customer.prototype.GetCommission() = function Customer.GetCommission() |) 


alert ("payrol11"): 


CC Customer.GetCommission() = function () { 
alert ('payroll'); 


CD. Customer.prototype.GetCommission() = function () 


alert ('pay 


he? 
La) 
a 
p 
T 
~ 


A. Option A 
B. Option B 
C. Option C 
D. Option D 


Answer: D 


* Object.prototype.constructor 

Returns a reference to the Object function that created the instance's prototype. Note that the value 
of this property is a reference to the function itself, not a string containing the function's name. The 
value is only read-only for primitive values such as 1, true and "test". 

* The constructor property is created together with the function as a single property of 
func.prototype. 

Reference: Object.prototype.constructor 
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Ouestion: 17 


You are developing a web form that includes the following code. 
<div id="dynamicForm"> 
<input type="checkbox" id="myCheckbox" onclick-"ShowInputBox (" dynamicForm")," > 
</div> 
When a user selects the check box, an input text box must be added to the page dynamically. 
You need to ensure that the text box is added. 
Which function should you use? 


CA function ShowInputBox (divName) 
{ 
var newinputDiv = document.createElement ("div"): 
newInputDiv.innerHIML = "<input type="text’ id='newInputBox'>"; 
document.getElementByld (newinputDiv) .appendChild(divName) ; 
} 


CB. function ShowInputBox (divName) 
{ 
var newiInputDiv = document.createElement ("div"): 
newInputDiv.innerHTML = "<input type='text’ id='newInputBox'>"; 
document. getElementById (divName) .appendChild (newInputDiv) ; 
} 


CC function ShowInputBox (divName) 
{ 
var newinputDiv = document .createElement('div'); 
newiInputDiv.innerHIML = "<input type='text' id='newInputBox'>"; 
document .getElementByld(divName) .applyElement (newInputDiv); 
) 


CD. function ShowInputBox (divName) 
( 
var newInputDiv = document.createElement ("div"): 
newinputDiv.innerHTML = "<input type='text' id="newInputBox'>"; 
document. getElementBylId(newInputDiv) .applyElement (divName) ; 
} 


A. Option A 
B. Option B 
C. Option C 
D. Option D 


Answer: B 
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We create a now div element with the textbox. 
We then use appendChild() method appends this node as the last child the input node divname. 
Reference: HTML DOM appendChild() Method 


Ouestion: 18 


HOTSPOT 

An HTML page has a canvas element. 

You need to draw a red rectangle on the canvas element dynamically. The rectangle should resemble 
the following graphic. 


How should you build the code segment? (To answer, select the appropriate options from the drop- 
down lists in the answer area.) 


<!DOCTYPE html> 
<html> 
<body> 
<canvas id="mycanvas" width="300" height="300"></canvas> 


<script type-"text/javascript"> 


context. fillRect(S0, 50, 100, 100); ~ 
var context = canvas.getContext ("2d"): 
context. fillRect(50, 50, 100, 100); ~ 
context. fillRect(50, 50, 100, 100); + 
</script> 
</body> 
</html> 
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<!DOCTYPE html> 
<html> 


<body> 
<canvas id="mycanvas" width="300" height="300"></canvas> 


<script type="text/javascript"> 


context. fillRect(50, 50, 100, 100); S 


ontext.fillRect(50, 50, 10€ 


context. fillstyle = "rgb(255, 0, 0)"; 
var Canvas = document. getElemeri8yid(mycarwas)); 
ath 


var context = canvas.getContext ("2d"): 


= a a 0) 
= document. getElementByld(mycanvas') ; 
var Canvas = document.BeginPatn() 


var canvas = document, getElementayidCmycañvas); 
var Canvas = document.BeginFath(): 


</script> 


</body> 
</html> 


Answer: 
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<!DOCTYPE html> 
<html> 
<body> 


<canvas id-"mycanvas" width="300" height="300"></canvas> 


<script type="text/javascript"> 


</script> 


</body> 
</html> 


* getElementByld 

The getElementByld() method accesses the first element with the specified id. We use it to get a 
reference to the canvas. 

* context.fillStyle. 

Example: 

Define a red fill-color for the rectangle: 
JavaScript: 

var c=document.getElementByld("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle-"#FFOOOO", 
ctx.fillRect(20,20,150,100): 
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Reference: HTML canvas fillStyle Property 


Ouestion: 19 


You are developing an HTML5 page that has an element with an ID of logo. The page includes the 
following HTML. 


<div> 
Logo:<br> 

<div id-"logo"> 
</div> 

</div> 


You need to move the logo element lower on the page by five pixels. 
Which lines of code should you use? (Each correct answer presents part of the solution. Choose two.) 


A. document.getElementByld("logo") .style.position = "relative"; 
B. document.getElementByld("logo").Style.top = "Spx"; 
C. document.getElementByld("logo").style.top = "-5px", 
D. document.getElementByld("logo").style.position = "absolute"; 


Answer: A, B 


* style.position = "relative"; 
The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's 
LEFT position. 
* For relatively positioned elements, the top property sets the top edge of an element to a unit 
above/below its normal position. 
Example: Example 
Set the top edge of the image to 5px below the top edge of its normal position: 
img { 
position: relative; 
top: 5px; 
} 
Reference: CSS position Property; CSS top Property 
http://www.w3schools.com/cssref/pr_class_position.as 
http://www.w3schools.com/cssref/pr pos top.as 


Ouestion: 20 


You are developing a web page by using HTML5 and C5S3. The page includes a <div> tag with the ID 
set to validate. 

When the page is rendered, the contents of the <div> tag appear on aline separate from the content 
above and below it. The rendered page resembles the following graphic. 
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content 


more content 


The page must be rendered so that the <div> tag is not forced to be separate from the other content. 
The following graphic shows the correctly rendered output. 


content more content 


You need to ensure that the page is rendered to meet the reguirement. 
Which line of code should you use? 


A. document.getElementByld("validate").style.display = "inline"; 
B. document.getElementByld("validate").style.margin = "0", 

C. document.getElementByld("validate").style.padding = "0"; 

D. document.getElementSyld("validate").style.display = "block"; 


Answer: A 


* display: value; 
value: inline 
Default value. Displays an element as an inline element (like <span>) 


* Example 
Display <p> elements as inline elements: 
p.inline { 
display: inline; 
} 


Reference: CSS display Property 
http://www.w3schools.com/cssref/pr class display.as 


Ouestion: 21 


HOTSPOT 

You are creating a web worker for an HTML5 application. 

The following tasks must be performed from within the web worker: 

Register an event listener for the web worker 

Start and stop the web worker 

You need to define a function that performs the reguired tasks. 

Which code segment should you use? (To answer, select the appropriate option from the drop-down 
list in the answer area.) 
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[self postMessage(Worker: "+ data); “| 


var data = event.data; 
switch (data.cmd) ( 
case "start": 
break: 
case "stop": 
[self.postMessage (Worker: "+ data); -| 
break; 
default: 


self.postMessage ("Try again: ' + data.msg): 
default: 


self.postMessage('Try again: " + data.msg): 
+: 


}, false); 
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lbe hode "+ data); v 


Í | ely + data 
self, addeventL istener (message! , RCE END). 


self.attachEvent(Worker', data); 


var data = event.data: 
switch (data.cmd) { 


case "start": 


self. i s io + d 


break; 


case "stop": 


break: 


default: 


self.postMessage ("Try again: " + data.msg): 
default: 


self.postMessage ("Try again: " + data.msg): 
5: 
), false): 


Answer: 
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th 


POS lessageí 
self addtvent 


self. li a do + l v 


var data — event.data: 
switch (data.cmd) 1 


case ‘start’: 


self.addeventListener ( message, function(event)) ; 
self.attachEvent(Worker', data); 


case "stop": 


default: 


self.postMessage ("Try again: ' + data.msg): 
default: 


self.postMessage ("Try again: ' + data.msg); 
}; 
}, faise); 


* addEventListener 
The addEventListener() method attaches an event handler to the specified element. 
In context of a worker, both self and this refer to the global scope. The worker can either add an 


event listener for the message event, or it can define the onmessage handler to listen for any 
messages sent by the parent thread. 
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* postmessage 

Pass a message to the worker. 

* close() 

Terminating Workers 

Workers are resource-intensive; they are OS-level threads. Therefore, you do no want to create a 
large number of worker threads, and you should terminate the web worker after it completes its 
work. Workers can terminate themselves, like this: 

self.close(); 

Reference: HTML DOM addEventListener() Method; The Basics of Web Workers 


Question: 22 


You are creating a JavaScript function that displays the name of a web application. 

You declare the following button element. 

<input type="button" id= "About" value="About" /> 

When a user clicks the button, a JavaScript function named About must be called. 

You need to create an event handler that calls the About function when the button is clicked. 

Which two code segments can you use? (Each correct answer presents a complete solution. Choose 
two.) 


[ A var button = document.getElementByid("About"); 
criptEngine,cal1 (button, About ()): 


[ B var button = document.getElementById ("About"); 
ScriptEngine.bind (button, About ()): 


[IV var button = document.getElementByid ("About") 
button.addEventListener "click", About); 


s. 


LB var button = document.getElementByid ("About") 
button.attachEvent ("onclick", About); 


s. 


A. Option A 
B. Option B 
C. Option C 
D. Option D 


Answer: C, D 


C: addEventListener 

The addEventListener() method attaches an event handler to the specified element. 

In context of a worker, both self and this refer to the global scope. The worker can either add an 
event listener for the message event, or it can define the onmessage handler to listen for any 
messages sent by the parent thread. 

D: attachEvent method 

Registers an event handler function (event listener) for the specified event on the current object. 
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Reference: addEventListener method; attachEvent method 
http://help.dottoro.com/ljeuggog.ph 
http://help.dottoro.com/ljinxrmt.ph 


Ouestion: 23 


HOTSPOT 

You are creating a function by using JavaScript. 

The function accepts an object as the parameter and returns a string that identifies the data type of 
the object. 

You have the following reguirements: 

The function must return "Number" if the object is a number. 

The function must return "String" if the object is a string. 

The function must return "Unknown" if the object is neither a number nor a string. 

You need to implement the function to meet the reguirements. 

How should vou build the code segment? (To answer, select the appropriate options from the drop- 
down lists in the answer area.) 


function GetObjectType (obj) í 


[default -| (obj. constructor) { 


default v| Number: 
return "Number": 


(default "| H 
[default | String: 


return "String"; 


(default | ; 
Er =} 


return "Unknown": 
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function GetObjecrType (obj) í 


(cb3.constructor) í 
default 


return "String"; 
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Answer: 
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function GetCbjectType (obj) í 
(obj.constructor) { 


return "String"; 


return "Unknown"; 


} 


* Use the switch statement to select one of many blocks of code to be executed. 
Syntax 
switch(expression) { 
case n: 
code block 
break; 
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case n: 
code block 
break; 
default: 
default code block 
) 
This is how it works: 
The switch expression is evaluated once. 
The value of the expression is compared with the values of each case. 
If there is a match, the associated block of code is executed. 
* Object.prototype.constructor 
Returns a reference to the Object function that created the instance's prototype. Note that the value 
of this property is a reference to the function itself, not a string containing the function"s name. The 
value is only read-only for primitive values such as 1, true and "test". 
* Description 
All objects inherit a constructor property from their prototype: 
var o = {}; 
o.constructor === Object; // true 
var a = [];a.constructor === Array; // true 
var n = new Number(3); 
n.constructor === Number; // true 
* The constructor property is created together with the function as a single property of 
func.prototype. 
Reference: JavaScript Switch Statement;Object.prototype.constructor 


Question: 24 


You need to test the value of the following variable in JavaScript. 

var length = "75"; 

A block of code must execute if the length equals 75 regardless of the data type. 

You need to use the statement that meets this requirement. 

Which lines of code should you use? (Each correct answer presents a complete solution. Choose 
two.) 


A. if (length = = = 75) 
B. if (length = = 75) 
C. if (length! = 75) 

D. if (length = = "75") 


Answer: B, D 


When comparison is made using double-equals operator (==), it will check the values of variable and 
convert them to a common type and returns true if both are equals. So comparing number with 
string having the same value will return true. 

Examples: 

examples: 

1 

console.log(23 == "23"); // true 

2 


https://www.certkillers.net 


Ouestions & Answers PDF Page 40 


console.log(1 == true); // true 

Incorrect: 

not ===: This is “strict” or “identical” equality. 

Reference: JavaScript Triple Equals Operator vs Double Equals Operator ( === vs == 


Question: 25 


You are developing an application that uses a third-party JavaScript library named doWork(). 
The library occasionally throws an "object is null or undefined" error with an error code of 
-2146823281. 

The application must: 

Extract and handle the exceptions thrown by doWork() 

Continue normal program execution if other exceptions occur 

You need to implement the requirements. 

Which code segment should you use? 


Pont 


CA if (doWork() == -2146823281) 


CB. if (doWork() == "object is null or undefined") 


U Č. try { 
doWork(); 
} catch(e) 
if (e.number == -2146823281) 


COD: sy € 
doWork(); 
} catch(e) 
if (e.message == -2146823281) 
} 
A. Option A 
B. Option B 
C. Option C 
D. Option D 


Answer: C 
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* The try statement lets you test a block of code for errors. 
The catch statement lets vou handle the error. 
The JavaScript statements try and catch come in pairs: 
try { 
Block of code to try 
} 
catch(err) { 
Block of code to handle errors 
} 
* object.number [= errorNumber] 
Returns or sets the numeric value associated with a specific error. The Error object's default property 
is number. 
* Example: 
The following example causes an exception to be thrown and displays the error code that is derived 
from the error number. 
try 
{ 
// Cause an error. 
var X < V: 
) 
catch(e) 
{ 
document.write ("Error Code: "); 
document.write (e.number & OxFFFF) 
document.write ("<br />"); 


document.write ("Facility Code: ") 
document.write(e.number>>16 & Ox1FFF) 
document.write ("<br />"); 
document.write ("Error Message: ") 
document.write (e.message) 
} 

The output of this code is as follows. 

Error Code: 5009 

Facility Code: 10 

Error Message: 'y' is undefined 

Reference: JavaScript Errors - Throw and Try to Catch; number Property (Error) (JavaScript) 
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